<template>
	<view class="app l_pages">
		<jnavbar title="我的收藏" :PageId="19"></jnavbar>
		<scroll-view class="page_container" scroll-y>
			<block v-if="hasShow == 'none'"><u-empty text="收藏空" mode="car"></u-empty></block>
			<view class="list" v-if="hasShow == 'list'">
				<view @click="todetails(item)" class="item uni-flex-row" v-for="(item, i) in list" :key="i">
					<vimage class="img_box" :src="item.commodity.master"></vimage>
					<view class="content  uni-flex-column">
						<text class="u-line-2">{{ item.commodity.name }}</text>
						<view class="btns_div uni-flex-row uni-flex-title">
							<text>￥{{ item.commodity.sell_price }}</text>
							<view class="">
								<text @click.stop="gotrolley(item.commodity)" class="icon el-sc-gouwuche1"></text>
								<text @click.stop="delcollect(item.commodity.id)" class="icon el-sc-shoucang4"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<guesslike ref="guesslike" page_id="4"></guesslike>
		</scroll-view>
		<trolley ref="trolley"></trolley>

		<nloading></nloading>
		<floatmenu page_id="6"></floatmenu>
		
		<tab-bar ref="tabbar" :PageId="19"></tab-bar>
	</view>
</template>

<script>
import trolley from '@/components/trolley/trolley.vue';
export default {
	data() {
		return {
			list: [],
			hasShow: 'none',
			page: 1
		};
	},
	async onLoad() {
		await this.$getWx;
		this.collectlist();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.collectlist();
	},
	onReachBottom() {
		this.collectlist();
	},
	methods: {
		todetails(item) {
			this.Jumpurl({
				type: 2,
				login_type: 1,
				id: item.commodity.id
			});
		},
		gotrolley(item) {
			let data = {
				show: true,
				id: item.id
			};
			this.$store.commit('settrolley', data);
			// this.$refs.trolley.getdetail(item.id);
		},
		collectlist() {
			this.changeloading({loading: true});
			this.$http('/user/collect/list?page=' + this.page + '&size=10', {}, 'POST').then(res => {
				let list = res.data.msg.data;
				if (list.length > 0) {
					this.page++;
					this.list = this.list.concat(res.data.msg.data);
					this.hasShow = 'list';
				} else {
					if (this.page == 1) {
						this.hasShow = 'none';
					}
				}
				this.$refs.guesslike.init()
				this.changeloading({loading: false});
			});
		},
		delcollect(id) {
			this.$http('/user/collect/' + id, {}, 'DELETE').then(res => {
				this.list = [];
				this.page = 1;
				this.collectlist();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.list {
	padding-top: 20rpx;
	.item {
		width: 702rpx;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		margin-left: 24rpx;
		padding: 24rpx;
		
		.img_box {
			height: 120rpx;
			width: 120rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}
		.content {
			height: 120rpx;
			margin-left: 20rpx;
			flex: 1;
			justify-content: space-between;
			.btns_div {
				width: 100%;
				color: #ff3c29;
				.icon {
					margin-left: 20rpx;
				}
			}
		}
	}
}
</style>
